<template>
  <div class="coupon-wrap">
    <G_header title="我的卡券" /> 
    <div>
      <van-tabs v-model="active">
        <van-tab title="秒抢卡">
          <div class="card" v-for="(item,index) in card " :key="index">
            <span class="number">
                {{ item.number | num }}
            </span>
            <img v-lazy="item.avatar">
            <div class="button">
              <template v-if="item.name == 'dayCard'">
                 <van-button type="default" @click="chengconversion(item)" size="small" round plain>转换爆品券</van-button>
              </template>
              &nbsp;
              <van-button type="default" @click="useCard(item)" size="small" round plain>确认使用</van-button>
            </div>
            
          </div>
          <div v-if="card" style="text-align: center;padding: 30px;">
            没有秒抢卡,快去购买吧
          </div>
        </van-tab>
        <van-tab title="优惠券">
          <div class="coupons shadow" v-for="(item,index) in coupons" :key="index">
            
            <div class="store-info ">
              <van-row type="flex" justify="space-between">
                <van-col span="6">
                  <div class="price">
                    <div>{{ item.price | money }}</div>
                  </div></van-col>
                <van-col span="16" offset="2">
                  <p>{{ item.coupon.title }} &nbsp;&nbsp;&nbsp; {{ item.number | num }}</p>
                  <p style="color:rgba(0,0,0,.6)">获得时间: {{ item.created_at }}</p>
                </van-col>
              </van-row>
              <template v-if="item.coupon.store">
                  <van-row type="flex" justify="space-between">
                      <van-col span="7" offset="1">
                        <van-image
                          round
                          width="2rem"
                          height="2rem"
                          :src="item.coupon.store.avatar || 'https://img.yzcdn.cn/vant/cat.jpeg'"
                        />
                      </van-col>
                      <van-col span="16"><p>{{ item.coupon.store.title }}</p></van-col>
                    </van-row>
            </template>
            </div>
           
          </div>
          <!-- <div >
            <van-cell-group>
              <van-cell title="爆品券" :value="'剩余'+item.number" />
            </van-cell-group>
          </div> -->
        </van-tab>
      </van-tabs>
    </div>
    <van-dialog
      v-model="conversionCardType"
      title="转换爆品券"
      show-cancel-button
      @confirm="conversionCard"
    >
    <van-cell-group>
      <van-field v-model="conversionValue" placeholder="请输入数量" label="数量" />
    </van-cell-group>
    </van-dialog>
    <copyright />
  </div>
</template>

<script>
import { Dialog } from 'vant';
import { Notify } from 'vant';
export default {
  name: "Coupon",
  data() {
    return {
      active: 0,
      coupons:[],
      card:[],
      conversionCardType: false,
      conversionValue: null,
      conversion_id: null,
    };
  },
  created(){
    this.getData()
  },
  methods: {
    getData(){
      let params = {};
      params.token = sessionStorage.getItem('token');
      this.axios.get('/api/store/user/card/my_list',{params}).then(res=>{
        this.coupons = res.data.data.coupons;
        this.card = res.data.data.card;
      }).catch(err=>{
        console.log(err);
        
      })
    },
    useCard(item){
      let id = item.id;
      let params = {};
      params.token = sessionStorage.getItem('token');
      this.axios.get('/api/store/user/card/use_card/'+id,{params}).then(res=>{
        Notify({ type: 'success', message: res.data.message ,background:'#07c160',onClose:()=>{
          this.getData()
        } });
      }).catch(err=>{
        console.log(err);
      })
    },
    chengconversion(item){
      this.conversionCardType = true;
      this.conversion_id = item.id;
    },
    conversionCard(){
      this.conversionCardType = true;
      let id = this.conversion_id;
      let params = {};
      params.token = sessionStorage.getItem('token');
      params.number = this.conversionValue;
      this.axios.post('/api/store/user/card/convert',params).then(res=>{
        Notify({ type: 'success', message: res.data.message ,background:'#07c160',onClose:()=>{
          this.getData()
        } });
      }).catch(err=>{
        console.log(err);
        
      })
    },
    onClickLeft() {
      Toast("返回");
    }
  }
};
</script>
<style scoped>
.card {
  width: 94%;
  position: relative;
  margin: 7px auto 0;
}
.card img {
  width: 100%;
  border-radius: 4px;
}
.card .button {
  position: absolute;
  bottom: .75rem;
  right: 1rem
}
.card span.number {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 16px;
    color: #eee;
}
.coupons {
  margin: 0.7692rem 0.7692rem;
  padding: 0.7692rem;
  background: white;
  border-radius: 10px;
}
.store-info p {
  margin: .5rem 0;
  position: relative;
}
.store-info .price {
  padding: .25rem;
  text-align: center;
  height: 100%;
  font-size: 24px;
  font-weight: 700;
  color:crimson;
  display: flex;
  justify-content: center;
  align-items: center;
  
}
.store-info p::after {
  content: "";
  position: absolute;
  left: -.5rem;
  top:0;
  height: 100%;
  border-left: 1px solid rgba(170, 170, 170, .8);
}
</style>
